<template>
  <div>
    <div class="cookie">
      <span>首页</span> &gt; <span>购物车</span> &gt; <span>填写订单</span>
    </div>
    <div class="address">
      <div class="title">收货地址</div>
      <div class="address_info">
        <div class="info_left">
          <ul>
            <li><span>收货人：</span> {{ defAddress.receiver }}</li>
            <li><span>联系方式：</span> {{ defAddress.contact }}</li>
            <li><span>收货地址：</span> {{ defAddress.address }}</li>
          </ul>
          <a href="javascript:void(0);" @click="edit">修改地址</a>
        </div>
        <div class="info_right">
          <p @click="changeFlag = true">切换地址</p>
          <p @click="toadd">添加地址</p>
        </div>
      </div>
    </div>

    <!-- 商品信息部分 -->
    <div class="product">
      <h1>商品信息</h1>
      <table>
        <thead>
          <tr>
            <th>商品信息</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>实付</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in goods" :key="index">
            <td>
              <div>
                <img :src="item.picture" alt="" />
                <div>
                  <p class="pname">{{ item.name }}</p>
                  <div class="sku">{{ item.attrsText }}</div>
                </div>
              </div>
            </td>
            <td>￥{{ item.price }}</td>
            <td>{{ item.count }}</td>
            <td>￥{{ item.totalPrice }}</td>
            <td>￥{{ item.totalPayPrice }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 金额明细 -->
    <div class="money">
      <h1>金额明细</h1>
      <div class="money_info">
        <div>
          <span> 商品件数: </span> <span> {{ summary.goodsCount }} </span>
        </div>
        <div>
          <span> 商品总价: </span> <span>{{ summary.totalPrice }}</span>
        </div>
        <div>
          <span> 运费: </span> <span> {{ summary.postFee }} </span>
        </div>
        <div>
          <span> 应付总额: </span>
          <span id="price"> {{ summary.totalPayPrice }} </span>
        </div>
      </div>
      <div class="submit" @click="toSubmit">提交订单</div>
    </div>
    <!-- 切换地址弹出层 -->
    <transition>
      <div :style="coverStyle" class="changeCover" v-if="changeFlag">
        <div class="change_info">
          <h1 class="info_title">
            <span> 切换收获地址</span>
            <span @click="changeFlag = false">x</span>
          </h1>
          <div class="address_list">
            <div
              :class="['list_one', addressIndex == index ? 'addac' : '']"
              v-for="(item, index) in userAddresses"
              :key="index"
              @click="changeDef(index)"
            >
              <div><span>收货人：</span>{{ item.receiver }}</div>
              <div><span>联系方式：</span>{{ item.contact }}</div>
              <div><span>收货地址：</span>{{ item.address }}</div>
            </div>
          </div>
          <div class="btn_wrap">
            <div class="cancel">取消</div>
            <div class="sure" @click="changeAddress">确定</div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 添加地址弹出层 -->
    <div
      class="changeCover"
      v-if="AlladdressFlag"
      @click="addressFlag = false"
      :style="coverStyle"
    >
      <div class="change_info addaddress">
        <h1 class="info_title">
          <span> {{ coverTitle }}</span>
          <span @click="AlladdressFlag = false">x</span>
        </h1>
        <div class="list_form">
          <div class="form_item">
            <span>收货人：</span>
            <input v-model="addressObj.receiver" type="text" />
          </div>
          <div class="form_item">
            <span>手机号：</span>
            <input v-model="addressObj.contact" type="text" />
          </div>
          <div class="form_item">
            <span>地&nbsp;&nbsp;&nbsp;区：</span>
            <div class="sel_wrap" @click.stop="getProvince">
              <input
                type="text"
                :value="addressArr.join('  ')"
                placeholder="请选择地区"
              />
              <i class="iconfont icon-jiantouxia"></i>
              <div class="address_detail" v-if="addressFlag">
                <div
                  v-for="(item, index) in areaList"
                  :key="index"
                  class="detail_one"
                  @click.stop="changeData(item)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </div>
          <div class="form_item">
            <span>详细地址：</span>
            <input v-model="addressObj.address" type="text" />
          </div>
          <div class="form_item">
            <span>邮政编码：</span>
            <input v-model="addressObj.postalCode" type="text" />
          </div>
          <div class="form_item">
            <span>地址标签：</span>
            <input v-model="addressObj.addressTags" type="text" />
          </div>
          <div class="btn_wrap">
            <div class="cancel">取消</div>
            <div class="sure" @click="toAdd">确定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { _makeOrder, _submitOrder } from '../../api/order'
import { _addAddress, _editAddress } from '../../api/address'
import axios from 'axios'
export default {
  data () {
    return {
      coverTitle: '添加收获地址',
      addressFlag: false,
      coverStyle: {
        height: 3 * window.innerHeight + 'px'
      }, //遮罩层的样式
      changeFlag: false,
      userAddresses: [], //地址信息
      goods: [], //商品信息
      summary: {}, //订单价格信息
      defAddress: {}, //默认地址数据
      addressIndex: 0, //当前点击的地址下标
      areaList: [], //要加载的地址数据
      addressArr: [], //所选择地址
      id: '', //当前的收货地址id
      addressObj: {
        //添加或修改需要的数据
        receiver: '', //收货人
        contact: '', //联系人
        provinceCode: '', //省的code
        cityCode: '', //市的code
        countyCode: '', //区的code
        address: '', //详细地址
        postalCode: '', //邮编
        addressTags: '', //地址标签
        isDefault: 1 //是否默认
      },
      areaCode: [], //收集省 市 区 code的数据
      AlladdressFlag: false //地址添加修改的显示隐藏
    }
  },
  created () {
    this.makeOrder()
  },
  watch: {
    // watch 监控 是否有返回市或区的数据
    areaList: {
      handler (newVal) {
        console.log(newVal)
        if (newVal == undefined) {
          this.addressFlag = false
          this.areaList = []
        }
      },
      deep: true
    }
  },
  methods: {
    // 提交订单接口
    async toSubmit () {
      var res = await _submitOrder({
        goods: this.goods,
        addressId: this.defAddress.id,
        deliveryTimeType: 1,
        payType: 1,
        payChannel: 1,
        buyerMessage: '多放辣椒，少放醋'
      })
      console.log(res)
      alert('下单成功')
    },
    // 打开添加的弹出层
    toadd () {
      this.coverTitle = '添加收货地址'
      this.AlladdressFlag = true
      this.addressObj = {}
    },
    // 打开修改弹出层
    edit () {
      this.coverTitle = '修改收货地址'
      this.AlladdressFlag = true
      // 点击弹出编辑的弹出层  要把默认地址数据赋值回去
      this.addressObj = this.defAddress
    },
    // 点击地址弹出层的确定按钮
    async toAdd () {
      this.addressObj.provinceCode = this.areaCode[0]
      this.addressObj.cityCode = this.areaCode[1]
      this.addressObj.countyCode = this.areaCode[2]
      if (this.coverTitle == '添加收货地址') {
        console.log(this.addressObj)
        var res = await _addAddress(this.addressObj)
        alert('添加地址成功')
      } else if (this.coverTitle == '修改收货地址') {
        var editRes = await _editAddress(this.defAddress.id, this.addressObj)
        console.log(editRes)
        alert('修改地址成功')
      }

      console.log(res)
      this.AlladdressFlag = false
      this.addressObj = {}
      this.addressArr = []
      this.makeOrder()
    },
    // 切换要显示的数据
    changeData (item) {
      // 点击省或市  把要要渲染的数据的数组 替换成当前数据下的areaList
      this.areaList = item.areaList
      this.addressArr.push(item.name)
      this.areaCode.push(item.code)
    },
    getProvince () {
      this.addressFlag = true
      // 获取省
      axios({
        url:
          'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json',
        method: 'get'
      }).then(res => {
        console.log(res)
        this.areaList = res.data
      })
      this.addressArr = []
      this.areaCode = []
    },
    // 切换默认地址
    changeDef (index) {
      // 点击存储当前 点击的地址数据下标
      this.addressIndex = index
    },
    // 点击确定 去所有的地址数据中 根据点击的下标 获取默认地址数据
    changeAddress () {
      this.defAddress = this.userAddresses[this.addressIndex]
      this.changeFlag = false //关闭遮罩
    },
    // 获取订单页信息接口
    async makeOrder () {
      var res = await _makeOrder()
      console.log(res)
      this.userAddresses = res.data.result.userAddresses
      this.defAddress = res.data.result.userAddresses[0]
      this.goods = res.data.result.goods
      this.summary = res.data.result.summary
    }
  }
}
</script>
<style lang="less" scoped>
.cookie {
  display: flex;
  width: 1240px;
  background: #ccc;
  height: 80px;
  margin: 0 auto;
  line-height: 80px;
  span {
    margin-right: 20px;
    font-size: 20px;
  }
}
.address {
  width: 1240px;
  height: 250px;
  margin: 10px auto;
  .title {
    height: 71px;
    line-height: 71px;
    border-bottom: 1px solid #e5e5e5;
  }
  .address_info {
    width: 1240px;
    height: 180px;
    display: flex;
    align-items: center;
    .info_left {
      display: flex;
      flex: 1;
      height: 180px;
      border-right: 1px solid #ccc;
      justify-content: space-between;
      align-items: center;
      a {
        font-size: 20px;
        color: #27bb9a;
      }
      li {
        margin-top: 10px;
      }
    }
    .info_right {
      width: 420px;
      display: flex;
      align-items: center;
      p {
        width: 140px;
        height: 46px;
        text-align: center;
        line-height: 46px;
        border: 1px solid black;
        margin-left: 20px;
      }
    }
  }
}
.changeCover {
  position: absolute;
  width: 100vw;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  z-index: 999;
  .change_info {
    width: 600px;
    background: white;
    position: fixed;
    height: 350px;
    overflow-y: scroll;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    .info_title {
      line-height: 70px;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      box-sizing: border-box;
      span:nth-child(2) {
        font-size: 30px;
        cursor: pointer;
      }
    }
    .list_one {
      width: 90%;
      margin: 10px auto;
      height: 112px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      border: 1px solid #ccc;
      &:hover {
        border: 2px solid #27bb9a;
      }
    }
    .btn_wrap {
      width: 90%;
      margin: 30px 10px auto;
      display: flex;
      justify-content: space-around;
      div {
        width: 180px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
      }
      .cancel {
        background: #ccc;
      }
      .sure {
        background: #27bb9a;
      }
    }
  }
}
.product {
  width: 1240px;
  margin: 0 auto;
  h1 {
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid #e5e5e5;
  }
  table {
    width: 1240px;
    thead {
      height: 50px;
      line-height: 50px;
      background: #e5e5e5;
    }
    td {
      height: 110px;
      text-align: center;
      border-bottom: 1px solid #ccc;
      img {
        width: 70px;
        height: 70px;
        margin: 0 10px;
      }
      > div {
        display: flex;
      }
    }
  }
}
.money {
  width: 1240px;
  height: 500px;
  margin: 0 auto;
  h1 {
    height: 70px;
    line-height: 70px;
  }
  .money_info {
    width: 400px;
    height: 240px;
    margin-left: 1000px;
    // background: sandybrown;
    display: flex;
    flex-direction: column;
    font-size: 25px;
    justify-content: space-around;
    div {
      display: flex;
      justify-content: space-between;
      font-size: 20px;
      span {
        margin-right: 50px;
      }
    }
    #price {
      color: red;
      font-size: 25px;
    }
  }
  .submit {
    margin-top: 20px;
    margin-right: 50px;
    float: right;
    width: 180px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #27bb9a;
    color: white;
  }
}
.addac {
  border: 2px solid #27bb9a !important;
}

.addaddress {
  width: 900px !important;
  height: 700px !important;
  .list_form {
    width: 600px;
    margin: 20px auto;
    .form_item {
      height: 50px;
      line-height: 50px;
      margin-top: 20px;
      display: flex;
      span {
        font-size: 25px;
        color: #666;
      }
      input {
        width: 320px;
        border: 1px solid #ccc;
      }
      .sel_wrap {
        width: 320px;
        height: 50px;
        position: relative;
        input {
          width: 320px !important;
          height: 50px;
        }
        i {
          position: absolute;
          font-size: 30px;
          right: 10px;
          top: 3px;
          color: #ccc;
        }
        .address_detail {
          width: 550px;
          // height: 300px;
          background: white;
          position: absolute;
          left: 0;
          top: 50px;
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          border: 1px solid #e5e5e5;
          .detail_one {
            width: 23%;
            height: 30px;
            line-height: 30px;
            margin-top: 10px;
            text-align: center;
            &:hover {
              background: #ccc;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
